<!-- 终端日志 -->
<template>
    <!-- <list
        ref="list"
        table-ref="commandlist"
        :table-tag="tableName"
        :init-headmune-flag="initHeadmuneFlag"
        class="center"
        style="width: 100%" 
        height="calc(48vh)"
        :list-data="tableData"
        :has-select="false"
        :list-cols="colData"
        :init-cols-props.sync="initColsProps"
        :action-opts="actionOpts"
        @sort="handleSort"
        @init-table="initTable"
    ></list> -->
    <div>
        <list
          ref="list"
          table-ref="commandlist"
          :table-tag="tableName"
          :init-headmune-flag="initHeadmuneFlag"
          class="center"
          style="width: 100%" 
          height="430px"
          :list-data="tableData"
          :has-select="false"
          :list-cols="colData"
          :init-cols-props.sync="initColsProps"
          :action-opts="actionOpts"
          @sort="handleSort"
          @init-table="initTable"
        >
          <template slot="levelSlot" slot-scope="{row}">
            {{ row.level | levelFilter(te) }}
          </template>
        </list>
        <pagination :total="pageData.total" :page="pageData.page" :limit="pageData.limit" @pagination="doDeviceLogList"></pagination>
      </div>
</template>

<script>
import DeviceMonitorApi from '@/api/device'
import List from '@/components/List'
import Pagination from '@/components/Pagination'
export default {
    name: "CommandMonitorInfo",
    components:{
      List,
      Pagination
    },
    data() {
        const headerContextMenus = {
            width: '120px',
            items: [
                'sortUp',
                'sortDown',
                'line',
                'cols'
            ]
        }
        return {
            editorForm: {},
            tableData: [],
            colData: [
              { label: '发生时间', prop: "date", headerContextMenus},
              { label: '级别', prop: "level",slot: true, headerContextMenus},
              { label: '事件', prop: "event" }
            ],
            initColsProps: ['date', 'level', 'event'],
            actionOpts: {
                show: false,
            },
            sortKey : {
              date: 0,
              level: 4,
              event: 5,
            },
            pageData: {
              page: 1,
              total: 0,
              limit: 15
            },
            queryParam:{},
            tableName:'DeviceLogInfoTable',
            initHeadmuneFlag: false
        }
    },
    props: {
      mac: {
        default: ''
      }
    },
    filters: {
      levelFilter(val,te) {
        let msg = ''
        switch(val){
          case '0':
            msg = te('常规')
            break
          case '1':
            msg = te('警告')
            break
          case '2':
            msg = te('错误')
            break
        }
        return msg
      }
    },
    mounted() {
      this.queryParam.mac = this.mac
      this.doDeviceLogList()
    },
    methods: {
      initTable(config){
        this.initHeadmuneFlag = true //更改值  触发表头数据重绘
      },

      async doDeviceLogList(current) {
        if(current) {
          this.pageData = {
            ...this.pageData,
            ...current
          }
        }
        var queryData = this.$data.queryParam
        queryData.current = this.pageData.page
        queryData.size = this.pageData.limit
        queryData.mac = queryData.mac.replace(/[-]/g,"")
        const res = await DeviceMonitorApi.loadDeviceLogList(queryData)
        if(res) {
            this.tableData = res.records ? res.records : []
            this.pageData.total = Number(res.total? res.total: 0)
          }
      },
      //点击刷新
      refresh(){
        this.queryParam = {}
        this.queryParam.mac = this.mac
        this.doDeviceLogList()
      },
      // 排序
      handleSort(sortInfo) {
        // this.queryParam.orderParam = sortInfo.type
        // this.queryParam.orderType = this.sortKey[sortInfo.prop]
        // this.doDeviceLogList()

        if(sortInfo.type == 'ASC')
        {
          this.$refs.list.$refs.commandlist.sort(sortInfo.prop,'ascending');
        }else{
          this.$refs.list.$refs.commandlist.sort(sortInfo.prop,'descending');
        }
      },

      te(arg) {
        const hasKey = this.$te(arg)
        if (hasKey) {
          const result = this.$t(arg)
          return result
        }
        return arg
      },
    },
    watch: {
      mac(val) {
        if(val)
        {
          this.queryParam = {}
          this.mac = val
          this.queryParam.mac = this.mac
          this.doDeviceLogList()
        }
      }
    },
    created() {
      this.$eventBus.$on('doDeviceLogRefresh', this.refresh)
    },
    beforeDestroy() {
      this.$eventBus.$off('doDeviceLogRefresh')
    },
}
</script>